import React, { Component } from 'react'
import request from '../../api/api';
import './Login.scss'
import { Alert } from 'antd';
import loginAction from '../../redux/action/loginAction';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
class Login extends Component {
    state = {
        showError: false,
        showSuccess: false,
        msg: '',
        status: 0
    }
    login = () => {
        let username = this.unInp.value.trim()
        let password = this.pwInp.value.trim()
        if (username !== '' && password !== '') {
            if (password.length > 5) {
                request({
                    url: '/cpi/userInfo/add',
                    params: {
                        username,
                        password
                    },
                    method: 'post'
                }).then(res => {
                    // console.log(res);
                    if (res.code === 200) {
                        this.setState({
                            msg: res.data.title,
                            showSuccess: true,
                            showError: true,
                            status: res.data.type
                        })
                        this.props.loginAction(username)
                        this.props.history.replace('/app/my')
                    }
                })
            } else {
                this.setState({
                    msg: '密码不能小于六位数',
                    showError: true,
                    showSuccess: true
                })
            }

        } else {
            this.setState({
                showError: true
            })

        }

    }
    componentWillUpdate(nextProps, nextState) {
        // console.log(nextProps,nextState);
        if (nextState.showError) {
            this.t = setTimeout(() => {
                this.setState({
                    showError: false,
                    showSuccess: false,
                    msg: '',
                    status: 0
                })
            }, 1000);
        }
    }
    render() {
        let { showError, showSuccess, msg, status } = this.state
        return (
            <div className='my'>
                {
                    showError && <Alert message={showSuccess ? msg : "账号或密码不能为空"} type={showSuccess && status === 1 ? 'success' : 'error'} showIcon style={{ 'position': 'absolute', 'left': '25%' }} />
                }
                <p className="hp">猫眼电影</p>
                <div className="dengLu_nei">
                    <div>
                        <input type="text" name="username" id="" placeholder="请输入账号" ref={c => this.unInp = c} />
                    </div>
                    <div>
                        <input type="password" name="password" id="" placeholder="请输入密码" ref={c => this.pwInp = c} />
                    </div>
                    <div>
                        <button onClick={this.login}>登录</button>
                    </div>
                    <p className="zi1">未注册的账号将自动生成新账号</p>
                    <p className="zi2">© 猫眼电影 客服电话： <span>xxx-xxx-xxxx</span></p>
                </div>
            </div>
        )
    }
}
export default connect(
    state => ({}),
    { loginAction }
)(withRouter(Login))